<template>
  <view class="page-content">
    <luBarTabNav :tabList="menus" :barHeight="40" :barId="barId" ref="barTabNav">
      <view :id="'tbx' + ix" class="tabbody" v-for="(im, ix) in menus" :key="ix">
        <view class="title">{{ im.text }}</view>
        <view class="hr"></view>
        <view class="menu">
          <view class="item" v-for="(mu, mx) in im.list" :key="mx" @click="onJump(mu)">
            <image class="icon" mode="aspectFit" :src="mu.icon" />
            <text>{{ mu.name }}</text>
          </view>
        </view>
      </view>
    </luBarTabNav>
  </view>
</template>
<script>
import { mapState } from 'vuex';
import luBarTabNav from '@/components/lu-bar-tab-nav/lu-bar-tab-nav.vue';
import { uNavigateTo } from '../../utils/uniUtils';
export default {
  components: {
    luBarTabNav
  },
  data() {
    return {
      barId: '1',
      menus: [
        {
          text: '营业报表',
          navTarget: '#tbx0',
          list: [
            {
              name: '营业概览',
              route: '/pages/reportForms/businessAnalysis/overview',
              icon: '../../static/images/report-forms/dishSaleDetail.png',
              isTo: true
            },
            {
              name: '营业分析',
              route: '/pages/reportForms/businessAnalysis/tradeAnalysis',
              icon: '../../static/images/report-forms/分析.png',
              isTo: true
            },
            {
              name: ' 营业日汇总',
              route: '/pages/reportForms/businessAnalysis/businessDaySummary',
              icon: '../../static/images/report-forms/营业汇总.png',
              isTo: true
            },
            {
              name: '历史账单',
              route: '/pages/reportForms/business/historyBills',
              icon: '../../static/images/report-forms/overview.png',
              isTo: true
            },
            {
              name: '结算分析',
              route: '/pages/reportForms/business/settlementAnalysis',
              icon: '../../static/images/report-forms/分析.png',
              isTo: true
            },
            {
              name: '异常查询',
              route: '/pages/reportForms/business/exceptionQuery',
              icon: '../../static/images/report-forms/异常查询.png',
              isTo: true
            },
            {
              name: '餐区/餐桌统计',
              route: '/pages/reportForms/business/tableStatistics',
              icon: '../../static/images/report-forms/tableStatistics.png',
              isTo: true
            },
            {
              name: '餐/时段统计',
              route: '/pages/reportForms/business/periodSales',
              icon: '../../static/images/report-forms/periodSales.png',
              isTo: true
            },
            {
              name: '部门营业统计',
              route: '/pages/reportForms/business/sectoralBusinessStatistics',
              icon: '../../static/images/report-forms/department.png',
              isTo: true
            }
          ]
        },
        {
          text: '菜品报表',
          navTarget: '#tbx1',
          list: [
            {
              name: '菜品销售统计',
              route: '/pages/reportForms/goods/saleDetail',
              icon: '../../static/images/report-forms/saleDetail.png',
              isTo: true
            },
            {
              name: '菜品销售明细',
              route: '/pages/reportForms/goods/dishSaleDetail',
              icon: '../../static/images/report-forms/销售明细.png',
              isTo: true
            },
            {
              name: '分类统计',
              route: '/pages/reportForms/goods/classifyStatics',
              icon: '../../static/images/report-forms/dishSaleDetail.png',
              isTo: true
            },
            {
              name: '菜品销售排行',
              route: '/pages/reportForms/goods/salesRank',
              icon: '../../static/images/report-forms/rechargeConsumptionDetails.png',
              isTo: true
            },
            {
              name: '分类销售排行',
              route: '/pages/reportForms/goods/classifiedSales',
              icon: '../../static/images/report-forms/分类统计.png',
              isTo: true
            },
            {
              name: '菜单优惠统计',
              route: '/pages/reportForms/goods/discountStatistics',
              icon: '../../static/images/report-forms/department.png',
              isTo: true
            }
          ]
        },
        {
          text: '会员报表',
          navTarget: '#tbx2',
          list: [
            {
              name: '会员分析',
              route: '/pages/reportForms/member/memberAnalysis',
              icon: '../../static/images/report-forms/会员分析.png',
              isTo: true
            },
            {
              name: '会员积分明细',
              route: '/pages/reportForms/member/pointsDetails',
              icon: '../../static/images/report-forms/pointsDetails.png',
              isTo: true
            },
            {
              name: '充值消费明细',
              route: '/pages/reportForms/member/rechargeConsumptionDetails',
              icon: '../../static/images/report-forms/rechargeConsumptionDetails.png',
              isTo: true
            },
            {
              name: '储值消费分析',
              route: '/pages/reportForms/member/rechargeConsume',
              icon: '../../static/images/report-forms/rechargeConsume.png',
              isTo: true
            },
            {
              name: '储值余额汇总',
              route: '/pages/reportForms/member/userBalanceTotal',
              icon: '../../static/images/report-forms/userBalanceTotal.png',
              isTo: true
            }
          ]
        }
      ]
    };
  },
  onPageScroll: function (e) {
    this.$refs.barTabNav._selectedTab(e.scrollTop);
  },
  computed: {
    ...mapState(['store'])
  },
  methods: {
    onJump(row) {
      if (row.isTo) {
        uNavigateTo(row.route);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.page-content {
  position: relative;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}
.tabbody {
  position: relative;
  margin-top: 30rpx;
  padding: 0 3px;
  margin: 10px;
  background: #ffff;
  border-radius: 10rpx;
  .title {
    font-weight: 600;
    font-size: 30rpx;
    padding-left: 20rpx;
    line-height: 1;
    height: 80rpx;
    line-height: 80rpx;
  }
  .hr {
    width: 100%;
    height: 2rpx;
    background-color: #dddcdc;
  }
  .menu {
    display: flex;
    flex-wrap: wrap;
    padding: 30rpx 0;
    .item {
      width: 25%;
      font-size: 24rpx;
      padding: 10rpx 3px;
      display: flex;
      flex-direction: column;
      align-items: center;
      .icon {
        display: block;
        width: 50rpx;
        height: 50rpx;
        margin-bottom: 26rpx;
      }
    }
  }
}
</style>
